<template>
  <section class="drawer-box">
    <el-drawer
      ref="elDrawer"
      :visible="visible"
      :direction="usingDirection"
      :wrapper-closable="false"
      :size="width"
      :with-header="false"
      :append-to-body="true"
      :show-close="showClose"
      v-bind="$attrs"
      v-on="$listeners"
    >
      <header v-if="showHeader" id="el-drawer__title" class="drawer-header el-drawer__header"> <span>{{ title }}</span>
        <button
          v-if="showClose"
          type="button"
          class="el-drawer__headerbtn"
          aria-label="Close"
          @click="handleClose"
        >
          <i class="el-drawer__close el-icon el-icon-close" />
        </button>
      </header>
      <section class="drawer-content" :style="{height: contentHeight}">
        <slot />
      </section>
      <footer v-if="$slots.footer" class="box-wrapper drawer-footer" :style="{textAlign: footerLayout}">
        <slot name="footer" />
      </footer>
    </el-drawer>
  </section>
</template>

<script>
export default {
  name: 'MyDrawer',
  props: {
    title: { type: String, default: '标题' },
    visible: { type: Boolean, default: false },
    direction: { type: String, default: 'right',
      validator(val) {
        return ['top', 'bottom', 'left', 'right'].indexOf(val) !== -1
      }
    },
    width: { type: [String, Number], default: '45%' },
    showClose: { type: Boolean, default: true },
    showHeader: { type: Boolean, default: true },
    // left， cencter， right
    footerLayout: { type: String, default: 'right',
      validator(val) {
        return ['left', 'cencter', 'right'].indexOf(val) !== -1
      }
    }
  },
  data() {
    return {}
  },
  computed: {
    usingDirection() {
      let res = 'rtl'
      switch (this.direction) {
        case 'top':
          res = 'ttb'
          break
        case 'bottom':
          res = 'btt'
          break
        case 'left':
          res = 'ltr'
          break
        case 'right':
          res = 'rtl'
          break
        default:
          res = 'rtl'
          break
      }
      return res
    },
    // todo  direction为bottom和top的时候怎么设置
    contentHeight() {
      if (['top', 'bottom'].indexOf(this.direction) !== -1) {
        return `calc(70vh - ${this.$slots.footer ? '100px' : '50px'})`
      } else { return `calc(100vh - ${this.$slots.footer ? '100px' : '50px'})` }
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-drawer__open> .el-drawer.ttb, .el-drawer.btt{
  height: 70vh !important;
}
.drawer-header.el-drawer__header{
  height: 50px;
  cursor: default;
  color: $white;
  padding: $const 10px;
  background-color: $menuActiveText;
  margin-bottom: 0;
  &>span{
    display: inline-block;
    font-size: $const + 4;
  }
  &>button.el-drawer__headerbtn {
    font-size: $const + 4;
    cursor: pointer;
    border: none;
    background-color: transparent;
    color: $white;
      &:focus, &:active{
      position: relative;
      outline: none;
    }
  }
}
.drawer-content {
  overflow: auto;
  padding: 14px 10px;
  cursor: default;
}
.drawer-footer {
  height: 50px;
  background-color: $bg;
  padding: 10px 20px;
}
</style>
